<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="1200px">
		<el-form ref="formRef" :model="form" :rules="rules" label-width="auto" disabled>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="优惠券名称" prop="name">
						<el-input v-model="form.name" placeholder="请输入优惠券名称" clearable />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="使用方式" prop="way">
						<el-select v-model="form.way" class="w100">
							<el-option label="全场通用" :value="1" />
							<el-option label="指定商品" :value="2" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="用户可领取张数" prop="receive_rule">
						<el-input v-model="form.receive_rule" placeholder="请输入用户可领取张数" @input="verifiyNumberIntegerReceiveRule" />
					</el-form-item>
				</el-col>
				<el-col v-if="form.way === 2" :span="12">
					<el-form-item label="指定商品" prop="goods_id">
						<el-select
							v-model="form.goods_id"
							clearable
							placeholder="请输入选择商品"
							filterable
							remote
							:remote-method="goodsIdRemoteMethod"
							:loading="goodsIdSelect.loading"
							@focus="onGoodsIdFocus"
							class="w100"
						>
							<el-option v-for="item in goodsIdSelect.options" :key="item.id" :label="item.title" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="最低消费" prop="money_full">
						<el-input v-model="form.money_full" placeholder="请输入最低消费" @input="verifyNumberIntegerAndFloatMoneyFull" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="优惠金额" prop="money">
						<el-input v-model="form.money" placeholder="请输入优惠金额" @input="verifyNumberIntegerAndFloatMoney" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="排序" prop="sort">
						<el-input v-model="form.sort" placeholder="请输入排序" @input="verifiyNumberIntegerSort" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="上架时间" prop="time">
						<el-date-picker
							v-model="form.time"
							type="datetimerange"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							format="YYYY/MM/DD HH:mm:ss"
							value-format="X"
							class="w100"
						/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item label="优惠券数量" prop="num">
						<el-input v-model="form.num" placeholder="请输入优惠券数量" @input="verifiyNumberIntegerNum" />
					</el-form-item>
				</el-col>
				<!-- <el-col :span="12">
					<el-form-item label="说明" prop="illustrate">
						<el-input v-model="form.illustrate" :min="0" :precision="0" :controls="false" placeholder="请输入说明" />
					</el-form-item>
				</el-col> -->
				<el-col :span="12">
					<el-form-item label="发放方式" prop="grant_way">
						<el-select v-model="form.grant_way" class="w100">
							<el-option label="自己领取" :value="1" />
							<el-option label="后台发放" :value="2" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row v-if="form.grant_way === 1" :gutter="10">
				<el-col :span="12">
					<el-form-item label="领取等级" prop="issuing_officer">
						<el-select v-model="form.issuing_officer" multiple placeholder="请选择领取等级" class="w100">
							<el-option v-for="item in issuingOfficerOptions" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { couponApi } from '/@/api/admin';
import { verifyNumberIntegerAndFloat, verifiyNumberInteger } from '/@/utils/toolsValidate';
import { goodsList } from '/@/api/admin1';

export default {
	setup() {
		const CouponApi = couponApi();
		const state = reactive({
			title: '查看优惠券',
			open: false,
			form: {} as any,
			rules: {
				name: [{ required: true, message: '优惠券名称不能为空', trigger: ['blur'] }],
				time: [{ required: true, message: '上架时间不能为空', trigger: ['blur', 'change'] }],
				money_full: [{ required: true, message: '最低消费不能为空', trigger: ['blur', 'change'] }],
				money: [{ required: true, message: '优惠金额不能为空', trigger: ['blur'] }],
				receive_rule: [{ required: true, message: '用户可领取张数不能为空', trigger: ['blur'] }],
				grant_way: [{ required: true, message: '发放方式不能为空', trigger: ['blur', 'change'] }],
				goods_id: [{ required: true, message: '指定商品不能为空', trigger: ['blur', 'change'] }],
				issuing_officer: [{ required: true, message: '领取等级不能为空', trigger: ['blur', 'change'] }],
			}, // 表单校验
			submitLoading: false,
			goodsIdSelect: {
				options: [] as any,
				loading: false,
			},
			issuingOfficerOptions: [
				{
					id: 1,
					name: '普通用户',
				},
				{
					id: 2,
					name: '物业管家',
				},
				{
					id: 3,
					name: '物业经理',
				},
			],
		});

		const formRef = ref(null);


		/********** 点击事件(on开头) **********/
		// 商品获取焦点
		const onGoodsIdFocus = () => {
			if (!state.form.good_id) {
				state.goodsIdSelect.loading = true;
				_goodsList({ pageNum: 1, pageSize: 10, status: 1 });
			}
		};

		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any) => {
			state.open = true;
			reset();
			if (config.row.way === 1) {
				let issuing_officer = [
					config.row.visible1 ? 1 : 0,
					config.row.visible2 ? 2 : 0,
					config.row.visible3 ? 3 : 0,
					config.row.visible4 ? 4 : 0,
					config.row.visible5 ? 5 : 0,
				].filter((item) => item);
				state.form = {
					...config.row,
					time: [config.row.start_time, config.row.end_time],
					issuing_officer: issuing_officer,
				};
			} else {
				_couponGoods(config.row);
			}
		};
		// 表单重置
		const reset = () => {
			state.form = {
				name: '', // 优惠券名
				way: 1, // 1：全场通用 2：指定商品
				money_full: '', // 最低消费
				money: '', // 优惠金额
				time: [],
				status: 1, // 状态
				receive_rule: '', // 领取次数（每人最多领取次数）
				num: '', // 优惠券数量
				sort: 0, // 排序
				illustrate: '', // 说明
				goods_id: [], // 商品id，多个用逗号隔开
				grant_way: 1, // 发放方式 1：自己领取 2：手动发放
				issuing_officer: [1, 2, 3, 4, 5],
			};
			(formRef.value as any)?.resetFields();
		};
		// 选择商品查询
		const goodsIdRemoteMethod = (query: any) => {
			if (query) {
				state.goodsIdSelect.loading = true;
				_goodsList({ pageNum: 1, pageSize: 10, status: 1, title: query });
			}
		};

		// 最低消费
		const verifyNumberIntegerAndFloatMoneyFull = (val: string) => {
			state.form.money_full = verifyNumberIntegerAndFloat(val);
		};
		// 优惠金额
		const verifyNumberIntegerAndFloatMoney = (val: string) => {
			state.form.money = verifyNumberIntegerAndFloat(val);
		};
		// 用户可领取次数
		const verifiyNumberIntegerReceiveRule = (val: string) => {
			state.form.receive_rule = verifiyNumberInteger(val);
		};
		// 优惠券数量
		const verifiyNumberIntegerNum = (val: string) => {
			state.form.num = verifiyNumberInteger(val);
		};
		// 排序
		const verifiyNumberIntegerSort = (val: string) => {
			state.form.sort = verifiyNumberInteger(val);
		};

		/********** 网络事件 **********/
		// 商品列表
		const _goodsList = (_data: object) => {
			state.goodsIdSelect.loading = true;
			goodsList(_data)
				.then((res: any) => {
					state.goodsIdSelect.options = res.data.list;
					state.goodsIdSelect.loading = false;
				})
				.catch(() => (state.goodsIdSelect.loading = false));
		};
		// 查询优惠券绑定的商品
		const _couponGoods = (params: any) => {
			CouponApi.couponGoods({ coupon_id: params.id }).then((res: any) => {
				state.goodsIdSelect.options = res.data.list;
				let issuing_officer = [
					params.visible1 ? 1 : 0,
					params.visible2 ? 2 : 0,
					params.visible3 ? 3 : 0,
				].filter((item) => item);
				state.form = {
					...params,
					goods_id: res.data.list[0].id,
					time: [params.start_time, params.end_time],
					issuing_officer: issuing_officer,
				};
			});
		};
		return {
			formRef,
			onGoodsIdFocus,
			openDialog,
			goodsIdRemoteMethod,
			verifyNumberIntegerAndFloatMoneyFull,
			verifyNumberIntegerAndFloatMoney,
			verifiyNumberIntegerReceiveRule,
			verifiyNumberIntegerNum,
			verifiyNumberIntegerSort,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
